<template>
  <el-card>
    <div class="flex-container">
      <el-image :src="history" style="width: 50%" />
      <div class="form-container" style="width: 50%">
        <PlusForm
          class="w-[450px] m-auto"
          :columns="columns"
          :rules="rules"
          label-position="right"
          @change="handleChange"
          @submit="handleSubmit"
          @submit-error="handleSubmitError"
          @reset="handleReset"
        />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import "plus-pro-components/es/components/form/style/css";
import history from "@/assets/register/simple.jpg";
import {
  type PlusColumn,
  type FieldValues,
  PlusForm
} from "plus-pro-components";

defineOptions({
  name: "Register"
});

const rules = {
  monName: [
    {
      required: true,
      message: "请输入真实姓名"
    }
  ],
  monTel: [
    {
      required: true,
      message: "请输入手机号码"
    },
    {
      pattern: /^[0-9]{11}$/,
      message: "手机号码必须是11位数字"
    }
  ],
  monPassword: [
    {
      required: true,
      message: "请输入密码"
    },
    {
      min: 6,
      message: "密码长度不能少于6位"
    },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
      message: "密码必须是字母和数字的组合，且长度不能少于6位"
    }
  ],
  confirmPassword: [
    {
      required: true,
      message: "请再次输入密码"
    }
  ]
};

const columns: PlusColumn[] = [
  {
    label: "手机号码",
    labelWidth: 120,
    prop: "monTel",
    valueType: "copy",
    tooltip: "请填写手机号码"
  },
  {
    label: "真实姓名",
    labelWidth: 120,
    prop: "monName",
    valueType: "input",
    tooltip: "真实姓名方便我们联系您"
  },
  {
    label: "出生年月",
    labelWidth: 120,
    prop: "monBirthday",
    valueType: "date-picker"
  },
  {
    label: "性别",
    labelWidth: 120,
    prop: "monSex",
    valueType: "radio",
    options: [
      {
        label: "男",
        value: 0
      },
      {
        label: "女",
        value: 1
      }
    ]
  },
  {
    label: "密码",
    labelWidth: 120,
    prop: "monPassword",
    valueType: "input",
    tooltip: "请输入密码"
  },
  {
    label: "确认密码",
    labelWidth: 120,
    prop: "confirmPassword",
    valueType: "input",
    tooltip: "请再次输入密码"
  }
];

const handleChange = (values: FieldValues, prop: PlusColumn) => {
  console.log(values, prop, "change");
};
const handleSubmit = (values: FieldValues) => {
  console.log(values, "Submit");
};
const handleSubmitError = (err: any) => {
  console.log(err, "err");
};
const handleReset = () => {
  console.log("handleReset");
};
</script>

<style>
.flex-container {
  display: flex;
}
</style>
